<template>
  <view class="container">
    <!-- 顶部图片区域，这里使用一个占位容器 -->
    <!-- <view class="top-image">
      <image src="../../static/caopanshou.png" mode="aspectFill"></image>
      <view class="categare">
        <text class="categare-title">操盘手 · 选题大师系列</text>
      </view>
    </view> -->
    <view class="list-container">
      <template v-if="loading">
        <view class="loading">加载中...</view>
      </template>
      <template v-else-if="groupedProducts.size > 0">
        <view v-for="([category, items], index) in groupedProducts" :key="index" class="category-group">
          <view class="category-image" v-if="category==='1000000'">
            <image src="../../static/caopanshou.png" mode="aspectFill"></image>
            <view class="categare">
              <text class="categare-title">操盘手 · 选题大师系列</text>
            </view>
          </view>
           <view class="category-image" v-else style="margin-top: 20rpx; margin-bottom: 20rpx;">
            <image src="../../static/wenchuang.png" mode="aspectFill"></image>

          </view>
          <ListItem v-for="(item, idx) in items" :key="idx" :item="item"  borderWidth="70%" @click="handleClick(item.click_url)" />
        </view>
      </template>
      <template v-else>
        <view class="empty">暂无产品数据</view>
      </template>
    </view>
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import CustomTabBar from '@/components/CustomTabBar.vue';
import ListItem from '@/components/ListItem.vue';
import { useAuth } from '@/composables/useAuth'
import { useProductStore } from '@/stores/product'
import { usePurchasedStore } from '@/stores/purchased';
import { onShow } from '@dcloudio/uni-app';
import { onMounted, ref, computed } from 'vue'

const productStore = useProductStore()
const { checkNeedLogin } = useAuth()
const loading = ref(false)
const purchasedStore=usePurchasedStore()

const groupedProducts = computed(() => {
  const groups = new Map<string, any[]>()
  productStore.agents.forEach(item => {
    const category = String(item.category || '未分类')
    if (!groups.has(category)) {
      groups.set(category, [])
    }
    groups.get(category)?.push(item)
  })
  console.log(groups,'22000000')
  return groups
})


const handleClick = (click_url?: string) => {
  // console.log(click_url, '2222222')
  if (!click_url) {
    uni.showToast({
      title: '无效的产品链接',
      icon: 'none'
    })
    return
  }
  // uni.navigateTo({
  //   url: `/pages/AIChat/AiChat?apiKey=${encodeURIComponent(click_url)}`
  // })
}

// 页面加载时获取数据
onMounted(async () => {
  loading.value = true
  try {
    await productStore.fetchAgents()
    const arr= purchasedStore.purchasedProducts
  } catch (error) {
    uni.showToast({
      title: '获取产品失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.container {
  background-color: #1f2128;
  padding-bottom: 120rpx;
  min-height: 100vh;
  box-sizing: border-box;
}

.top-image {
  position: relative;
  width: 94%;
  margin-left: 25rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
  height: 350rpx;
  overflow: hidden;
}

.top-image image {
  width: 100%;
  height: 100%;
}

.categare {
  position: absolute;
  bottom: 5rpx;
  width: 100%;
  text-align: start;
  padding-left: 20rpx;
  background-color: rgba(255, 255, 255, 0.6);
}

.categare-title {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.category-image {
  position: relative;
  width: 94%;
  margin-left: 25rpx;
  height: 350rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.category-image image {
  width: 100%;
  height: 100%;
}

.list-container {
  background-color: #1f2128;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10rpx;
}
</style>
